<script setup name="skutable">
import { initSkuTable } from "@/composables/useSku"

const { skuLables, tableHeader, skus_list } = initSkuTable()
</script>

<template>
  <el-form-item label="规格设置">
    <table border="0" align="center" cellpadding="0" cellspacing="0">
      <!-- 表头 -->
      <thead>
        <tr>
          <th v-for="(th, index) in tableHeader" :key="index" :width="th.width" :rowspan="th.rowspan" :colspan="th.colspan">
            {{ th.name }}
          </th>
        </tr>
        <tr>
          <th v-for="(th, index) in skuLables" :key="index">
            {{ th.name }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in skus_list" :key="index">
          <td width="100" v-for="(sku, skuI) in item.skus" :key="skuI">
            {{ sku.value }}
          </td>
          <td class="border">
            <el-input v-model="item.pprice" size="small"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.oprice" size="small"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.cprice" size="small"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.stock" size="small"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.volume" size="small"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.weight" size="small"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.code" size="small"></el-input>
          </td>
        </tr>
      </tbody>
    </table>
  </el-form-item>
</template>

<style scoped lang="scss">
table {
  border-radius: 4px;
  border: 1px solid #ccc;
  text-align: center;
  th {
    box-sizing: border-box;
    border: 1px solid #ccc;
  }
  tbody {
    tr {
      td {
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
